<template>
  <div class="media-wrap">
    <div v-if="url && !isViewer" class="audio-item" :style="{ height: height+'px', backgroundImage: 'url(' +url+ ')'}" />
    <div v-else-if="url && isViewer" v-viewer class="audio-viewer-item" :style="{ height: height+'px'}">
      <img class="audio-img" v-lazy="url" :key="`img${url}`" alt="">
    </div>
    <div v-else class="imgEmpty" :style="{ height: height+'px' }" >
       <img src="/static/noImg.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    url: String,
    isViewer: { // 是否需要点击放大
      type: Boolean,
      default: () => false
    },
    height: {
      type: Number,
      default: () => 180
    }
  },
  data() {
    return {
      // img:require('../../../public/static/none.png')
      img:require('../../../public/static/noImg.png')
    }
  },
  mounted(){
    // console.log(this.url)
  },
  components: {

  }
}
</script>

